<!--
 * @Author: 秦少卫
 * @Date: 2024-04-25 15:30:54
 * @LastEditors: 秦少卫
 * @LastEditTime: 2024-05-30 11:53:28
 * @Description: 我的素材
-->

<template>
  <div class="my-material">
    <Tabs v-model="activeTab">
      <TabPane label="个人信息" name="profile">
        <div class="profile-section">
          <div class="user-info">
            <Avatar :src="userInfo.avatar" size="large" />
            <div class="info">
              <h3>{{ userInfo.username }}</h3>
              <p>{{ userInfo.email }}</p>
            </div>
          </div>
          <div class="stats">
            <div class="stat-item">
              <h4>素材数量</h4>
              <p>{{ stats.materialCount }}</p>
            </div>
            <div class="stat-item">
              <h4>模板数量</h4>
              <p>{{ stats.templateCount }}</p>
            </div>
          </div>
          <div class="actions">
            <Button type="primary" @click="showEditModal = true">编辑信息</Button>
            <Button @click="showPasswordModal = true">修改密码</Button>
            <Button type="error" @click="handleLogout">退出登录</Button>
          </div>
        </div>
      </TabPane>
      <TabPane label="素材管理" name="materials">
        <uploadMaterial />
      </TabPane>
    </Tabs>

    <!-- 编辑信息弹窗 -->
    <Modal v-model="showEditModal" title="编辑个人信息" @on-ok="handleUpdateInfo">
      <Form :model="editForm" :label-width="80">
        <FormItem label="用户名">
          <Input v-model="editForm.username" placeholder="请输入用户名" />
        </FormItem>
        <FormItem label="邮箱">
          <Input v-model="editForm.email" placeholder="请输入邮箱" />
        </FormItem>
        <FormItem label="头像">
          <Input v-model="editForm.avatar" placeholder="请输入头像URL" />
        </FormItem>
      </Form>
    </Modal>

    <!-- 修改密码弹窗 -->
    <Modal v-model="showPasswordModal" title="修改密码" @on-ok="handleChangePassword">
      <Form :model="passwordForm" :label-width="80">
        <FormItem label="当前密码">
          <Input
            v-model="passwordForm.currentPassword"
            type="password"
            placeholder="请输入当前密码"
          />
        </FormItem>
        <FormItem label="新密码">
          <Input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" />
        </FormItem>
        <FormItem label="确认密码">
          <Input
            v-model="passwordForm.confirmPassword"
            type="password"
            placeholder="请再次输入新密码"
          />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Message } from 'view-ui-plus';
import { getCurrentUser, updateUserInfo, changePassword, logout } from '@/api/user';
import uploadMaterial from './uploadMaterial.vue';

const router = useRouter();
const activeTab = ref('profile');
const showEditModal = ref(false);
const showPasswordModal = ref(false);

const userInfo = ref({
  username: '',
  email: '',
  avatar: '',
});

const stats = ref({
  materialCount: 0,
  templateCount: 0,
});

const editForm = ref({
  username: '',
  email: '',
  avatar: '',
});

const passwordForm = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: '',
});

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const res = await getCurrentUser();
    userInfo.value = res.data.user;
    editForm.value = { ...res.data.user };
  } catch (err) {
    Message.error('获取用户信息失败');
  }
};

// 更新用户信息
const handleUpdateInfo = async () => {
  try {
    const res = await updateUserInfo(editForm.value);
    userInfo.value = res.data.user;
    Message.success('更新成功');
    showEditModal.value = false;
  } catch (err) {
    Message.error('更新失败');
  }
};

// 修改密码
const handleChangePassword = async () => {
  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    Message.error('两次输入的密码不一致');
    return;
  }

  try {
    await changePassword({
      currentPassword: passwordForm.value.currentPassword,
      newPassword: passwordForm.value.newPassword,
    });
    Message.success('密码修改成功');
    showPasswordModal.value = false;
    passwordForm.value = {
      currentPassword: '',
      newPassword: '',
      confirmPassword: '',
    };
  } catch (err) {
    Message.error('密码修改失败');
  }
};

// 退出登录
const handleLogout = async () => {
  try {
    await logout();
    localStorage.removeItem('token');
    localStorage.removeItem('userInfo');
    Message.success('退出成功');
    router.push('/login');
  } catch (err) {
    Message.error('退出失败');
  }
};

onMounted(() => {
  fetchUserInfo();
});
</script>

<style lang="less" scoped>
.my-material {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  .profile-section {
    max-width: 600px;
    margin: 0 auto;
  }

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .info {
    margin-left: 20px;
  }

  .info h3 {
    margin: 0;
    font-size: 20px;
  }

  .info p {
    margin: 5px 0 0;
    color: #666;
  }

  .stats {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 4px;
  }

  .stat-item {
    text-align: center;
  }

  .stat-item h4 {
    margin: 0;
    color: #666;
  }

  .stat-item p {
    margin: 5px 0 0;
    font-size: 24px;
    font-weight: bold;
  }

  .actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
